<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<style>
    .el-input-item {
        width: 260px;
    }

</style>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px"
                 style="margin-top: 5%;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;justify-content: space-between;margin-right: 5%">
            <el-form-item label="姓名" prop="name">
                <el-input class="el-input-item" size="small" v-model="formData.name"
                          placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="特长" prop="specialty">
                <el-input class="el-input-item" size="small" v-model="formData.specialty"
                          placeholder="请输入特长"/>
            </el-form-item>
            <el-form-item label="经验" prop="experience">
                <el-input class="el-input-item" size="small" v-model="formData.experience"
                          placeholder="请输入经验"/>
            </el-form-item>
            <el-form-item label="评级">
                <el-select v-model="formData.rating" placeholder="请选择评级" class="el-input-item"
                           size="small">
                    <el-option
                            v-for="dict in ratingOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="parseInt(dict.dictValue)"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <div style="display: flex;flex-direction: row;align-items: center">
                    <el-upload
                            action="/common/upload/file"
                            :on-success="handleSuccessavatar"
                            list-type="picture-card"
                            :on-error="handleErroravatar"
                            :limit="3"
                            :file-list="defaultavatarList"
                            :before-upload="beforeUploadavatar"
                            style="margin-left: 10px"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>

            </el-form-item>

            <el-form-item label="健康证" prop="healthHead">
                <div style="display: flex;flex-direction: row;align-items: center">
                    <el-upload
                            action="/common/upload/file"
                            :on-success="handleSuccessHealthCard"
                            list-type="picture-card"
                            :on-error="handleErroravatar"
                            :limit="3"
                            :file-list="defaultHealthCardList"
                            :before-upload="beforeUploadavatar"
                            style="margin-left: 10px"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>

            </el-form-item>
            <el-form-item label="预约人数" prop="reservationCount">
                <el-input class="el-input-item" size="small" v-model="formData.reservationCount"
                          placeholder="请输入预约人数"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input class="el-input-item" size="small" v-model="formData.price"
                          placeholder="请输入价格"></el-input>
            </el-form-item>
            <el-form-item label="认证状态">
                <el-select v-model="formData.status" placeholder="请选择认证状态" class="el-input-item"
                           size="small">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="parseInt(dict.dictValue)"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="text-align: center;margin-top: 5%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/admin/apChef.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");
    new Vue({
        el: '#app',
        data() {
            return {
                dialogVisible: false,
                formData: {},
                // 评级字典
                ratingOptions: [],
                defaultavatarList: [],
                defaultHealthCardList: [],
                // 认证状态字典
                statusOptions: [],
                rules: {
                    name: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                    createTime: [
                        {required: true, message: "创建时间不能为空", trigger: "blur"}
                    ],
                    updateTime: [
                        {required: true, message: "修改时间不能为空", trigger: "blur"}
                    ],
                }
            }
        },
        created() {
            if (id) {
                detail(id).then((res) => {
                    if (res.code === '200') {
                        this.formData = res.data
                        let avatarArr = []
                        avatarArr.push(res.data.avatar)
                        this.defaultavatarList = avatarArr.map(item => {
                            return {
                                name: item,
                                url: item
                            }
                        });
                        let healthArr = []
                        healthArr.push(res.data.healthCard)

                        this.defaultHealthCardList = healthArr.map(item => {
                            return {
                                name: item,
                                url: item
                            }
                        });
                    }
                });
            } else {
                this.formData = {}
            }
            getDicts("rating").then(response => {
                this.ratingOptions = response.data;
            });
            getDicts("verify_status").then(response => {
                this.statusOptions = response.data;
            });

        },
        methods: {


            handleSubmit() {
                if (id) {
                    addOrUpdate('/admin/apChef/update', this);
                } else {
                    addOrUpdate('/admin/apChef/add', this);
                }
            },

            handleSuccessavatar(response, file, fileList) {
                console.log('上传成功', response, file, fileList);
                if (response.code === '200') {
                    this.formData.avatar = response.data
                } else {
                    this.$message.error('上传失败');
                }
            },
            handleSuccessHealthCard(response, file, fileList) {
                console.log('上传成功', response, file, fileList);
                if (response.code === '200') {
                    this.formData.healthCard = response.data
                } else {
                    this.$message.error('上传失败');
                }
            },
            handleErroravatar(err, file, fileList) {
                // 文件上传失败的回调函数
                console.log('上传失败', err, file, fileList);
            },
            beforeUploadavatar(file) {
                // 在文件上传之前的钩子函数，可以在这里进行文件格式、大小等的校验
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt500KB = file.size / 1024 <= 2000;
                if (!isJPG) {
                    this.$message.error('只能上传jpg/png文件!');
                }
                if (!isLt500KB) {
                    this.$message.error('文件大小不能超过2M!');
                }
                return isJPG && isLt500KB;
            },
        }
    });
</script>
</html>
